import React, {Component, createRef, RefObject} from 'react';
import {Button, Checkbox, Form, FormInstance,  Input, message } from 'antd';
import {withRouter , RouteComponentProps} from "react-router-dom";
import '../../static/css/Login.scss'

interface IProps extends RouteComponentProps{

}

interface IState {

}

class Login extends Component<IProps, IState>{

    formRef: RefObject<FormInstance>;

    constructor(props:IProps) {
        super(props);
        this.formRef = createRef<FormInstance>();
    }

     onFinish = (values:any) => {
         const { username, password }  = values;
         if(username === 'admin'&& password === 'admin') {
             message.success('登录成功')
                 localStorage.setItem('user','aa');
                this.props.history.replace('/');
         }else {
             message.error('账号密码错误,测试密码为admin,admin')
         }
    };

     onFinishFailed = (errorInfo:any) => {
        console.log('Failed:', errorInfo);
    };

   public  render() {
        return (
            <div className= 'login_bg'>
                <Form
                    className= 'login_form'
                    ref= { this.formRef }
                    name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    initialValues={{ remember: true }}
                    onFinish={this.onFinish}
                    onFinishFailed={this.onFinishFailed}
                >
                    <Form.Item
                        label="用户名"
                        name="username"
                        rules={[{ required: true, message: '请输入您的用户名!' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="密码"
                        name="password"
                        rules={[{ required: true, message: '请输入您的密码!' }]}
                    >
                        <Input.Password />
                    </Form.Item>

                    <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }}>
                        <Checkbox>记住我</Checkbox>
                    </Form.Item>

                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit">
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        );
    }
}

export default withRouter(Login);
